<!--
 * @author: Kate-sy
 * @create: 2021-06-23 12:03 PM
 * @license: MIT
 * @lastAuthor: Kate-sy
 * @lastEditTime: 2021-06-23 18:36 PM
 * @desc: 
-->
<template>
  <div class="tag-nav-wrap" :style="{ display: tagnone }">
    <div class="tag-item" @click="tagClick($event)">全部</div>
    <div
      class="tag-item"
      :key="item"
      v-for="item in twonav"
      @click="tagClick($event)"
    >
      {{ item }}
    </div>
    <div
      class="tag-item"
      id="showmor"
      @click="showmor(alldata)"
      v-show="showmnone"
    >
      <div class="tri"></div>
      展开
    </div>
  </div>
</template>
<script>
export default {
  name: "Tagnav",
  props: {
    twonav: Array,
    alldata: Array,
    tagnone: String,
    showmnone: Boolean,
  },
  data() {
    return {
      fitsrdata: [],
    };
  },
  methods: {
    tagClick(e) {
      let tagitem = document.querySelectorAll(".tag-item");
      tagitem.forEach((ele) => {
        ele.style.cssText = "background-color: #fff;color:#909090;";
      });
      e.target.style.cssText = "background-color: #007fff;color: #fff;";
    },
    showmor(da) {
      this.$emit("showmor", da);
    },
  },
};
</script>
<style lang="scss" scoped>
.tag-nav-wrap {
  margin-top: 10px;
  width: 960px;
  @include flex(none, flex-start);
  flex-wrap: wrap;
  .tag-item {
    padding: 4px 10px;
    background-color: #fff;
    @include flex(none, center);
    border-radius: 35px;
    margin-right: 12px;
    @include font(13px, #909090);
    margin-bottom: 10px;
    &:hover {
      color: #007fff;
    }
  }
  #showmor {
    width: 42px;
    position: relative;
  }
  .tri {
    position: absolute;
    right: 8px;
    top: 12px;
    display: block;
    height: 5px;
    width: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #8a9aa9;
  }
  .tag-item:nth-child(1) {
    background-color: #007fff;
    color: #fff;
  }
}
</style>